并列 inline-block 元素间隙问题

想起来记录下这个问题是因为我这两天刚好写了个简单的翻页, 于是乎我写了这样一段代码:

<div class="pages">
    <span>prev</span>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>next</span>
</div>

.pages span{
    display: inline-block;
}

control+s过后就是下面这个:

似乎并没有什么不对…
然后我给页码加了边框, 非常普通的实线黑边框
下面, control~~~s!

奇怪的间隙出现了, 从开发者工具下可以看出, 这个间隙不属于内外边距等样式.
如果你的项目有设计师扔过来的设计图, 或者你自身是个要求高的人, 那是万万不能容忍这个奇怪的间隙的.
Let’s make a small change.

<div class="pages">
    <span>prev</span><span>1</span><span>2</span><span>3</span><span>next</span>
</div>

.pages span{
    display: inline-block;
}

间隙没有了, 唯一的改变就是所有 inline-block 的元素中的换行去掉了, 也就是连起来写.
经过测试, 不论是 inline 元素还是 block 元素, 设置 inline-block 之后都会出现这个问题. ( 这里不包括 IE6,IE7等几个小婊砸🙄, 他们的问题很复杂, 被转换元素本来的display 值对间隙有影响 )

那么间隙是来自于换行了, 其实这锅应该是空白字符压缩（white space collapse）来背, 历史遗留问题, 暂且不表.

诚然上面这种”连起来”的写法能够解决间隙问题, 但是对于有代码洁癖的程序员们来说, 是不可接受的. 那么就要寻求些其他解决方法.

####干掉闭合标签
意思就是下面这样

<div class="pages">
    <span>prev
    <span>1
    <span>2
    <span>3
    <span>next</span>
</div>

我觉得这也是个挑战代码洁癖的方式, 且在我自己的试验中并没有成功, i really don’t know why (无辜脸…

font-size = 0

这是给父元素的, 本仙女用这个开心的解决了间隙问题.
原理其实就是将那个换行的那个空白字符的字号设为了0

letter-spacing 或 word-spacing

.page{
    letter-spacing: -6px;
}
.pages span{
    letter-spacing: 0px;
}

.page{
    word-spacing: -6px;
}
.pages span{
    word-spacing: 0px;
}

此方法亲测有效, 但是要注意兼容问题 ( 比如 IE7 那个小婊砸 😷, 她会有残留)

负 margin

.pages span{
    margin-right: -6px;
}

这个方法显而易见, 缺点是在不同的字体字号等等换将下, 这个负 margin 的值并不固定.

–
最后贴一个网上翻来的大招

.page{
    font-size:0;
    [;font-size:12px;];
    *font-size:0;
    font-family:arial;
    [;letter-spacing:-3px;];
    *letter-spacing:normal;
    *word-spacing:-1px;
}
.page span{
    display:inline-block;
    *display:inline;
    *zoom:1;
    font-size:14px;
    letter-spacing:normal;
    word-spacing:normal;
}

考虑到了 IE, 考虑到了 chrome 及 safari 的较低版本 ( 没错, 我说的就是那个 12px 最小字号的问题 )等不同情况. 我自己没有测这么全过, 先行膜拜🙇‍♀️

总之, 本仙女手里的间隙问题解决了~